
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">

                <li>
                <i class="icon iconfont icon-iconfontjiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-iconfontjiantou</div>
                </li>

                <li>
                <i class="icon iconfont icon-jiantou-copy-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou-copy-copy-copy</div>
                </li>

                <li>
                <i class="icon iconfont icon-duanxin"></i>
                    <div class="name">短信</div>
                    <div class="fontclass">.icon-duanxin</div>
                </li>

                <li>
                <i class="icon iconfont icon-danchuang-guanbi"></i>
                    <div class="name">弹窗-关闭</div>
                    <div class="fontclass">.icon-danchuang-guanbi</div>
                </li>

                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">￥</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>

                <li>
                <i class="icon iconfont icon-gengduo-icon"></i>
                    <div class="name">更多-icon</div>
                    <div class="fontclass">.icon-gengduo-icon</div>
                </li>

                <li>
                <i class="icon iconfont icon-yuedubeijing-icon"></i>
                    <div class="name">阅读背景-icon</div>
                    <div class="fontclass">.icon-yuedubeijing-icon</div>
                </li>

                <li>
                <i class="icon iconfont icon-zitidaxiao-icon"></i>
                    <div class="name">字体大小-icon</div>
                    <div class="fontclass">.icon-zitidaxiao-icon</div>
                </li>

                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>

                <li>
                <i class="icon iconfont icon-houtaibofang"></i>
                    <div class="name">后台播放</div>
                    <div class="fontclass">.icon-houtaibofang</div>
                </li>

                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>

                <li>
                <i class="icon iconfont icon-yejianmoshi"></i>
                    <div class="name">夜间模式</div>
                    <div class="fontclass">.icon-yejianmoshi</div>
                </li>

                <li>
                <i class="icon iconfont icon-gengduo-"></i>
                    <div class="name">更多-5</div>
                    <div class="fontclass">.icon-gengduo-</div>
                </li>

                <li>
                <i class="icon iconfont icon-zuobian"></i>
                    <div class="name">左边“</div>
                    <div class="fontclass">.icon-zuobian</div>
                </li>

                <li>
                <i class="icon iconfont icon-youbian"></i>
                    <div class="name">右边“</div>
                    <div class="fontclass">.icon-youbian</div>
                </li>

                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>

                <li>
                <i class="icon iconfont icon-zuixinshuji"></i>
                    <div class="name">最新书籍</div>
                    <div class="fontclass">.icon-zuixinshuji</div>
                </li>

                <li>
                <i class="icon iconfont icon-wodeshujia"></i>
                    <div class="name">我的书架</div>
                    <div class="fontclass">.icon-wodeshujia</div>
                </li>

                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>

                <li>
                <i class="icon iconfont icon-jinru"></i>
                    <div class="name">进入</div>
                    <div class="fontclass">.icon-jinru</div>
                </li>

                <li>
                <i class="icon iconfont icon-quanbushuji"></i>
                    <div class="name">全部书籍</div>
                    <div class="fontclass">.icon-quanbushuji</div>
                </li>

                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>

                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>

                <li>
                <i class="icon iconfont icon-tianjiatupian"></i>
                    <div class="name">添加图片</div>
                    <div class="fontclass">.icon-tianjiatupian</div>
                </li>

                <li>
                <i class="icon iconfont icon-daqia"></i>
                    <div class="name">打卡</div>
                    <div class="fontclass">.icon-daqia</div>
                </li>

                <li>
                <i class="icon iconfont icon-bangdingshibai"></i>
                    <div class="name">绑定失败</div>
                    <div class="fontclass">.icon-bangdingshibai</div>
                </li>

                <li>
                <i class="icon iconfont icon-tianjiachenggong"></i>
                    <div class="name">添加成功</div>
                    <div class="fontclass">.icon-tianjiachenggong</div>
                </li>

                <li>
                <i class="icon iconfont icon-yitianjia"></i>
                    <div class="name">已添加</div>
                    <div class="fontclass">.icon-yitianjia</div>
                </li>

                <li>
                <i class="icon iconfont icon-jinruwodezhuanshu"></i>
                    <div class="name">进入我的专属</div>
                    <div class="fontclass">.icon-jinruwodezhuanshu</div>
                </li>

                <li>
                <i class="icon iconfont icon-fanxianjilu"></i>
                    <div class="name">返现记录</div>
                    <div class="fontclass">.icon-fanxianjilu</div>
                </li>

                <li>
                <i class="icon iconfont icon-wenti"></i>
                    <div class="name">问题</div>
                    <div class="fontclass">.icon-wenti</div>
                </li>

                <li>
                <i class="icon iconfont icon-wushouzhijilu"></i>
                    <div class="name">无收支记录</div>
                    <div class="fontclass">.icon-wushouzhijilu</div>
                </li>

                <li>
                <i class="icon iconfont icon-tixian"></i>
                    <div class="name">提现</div>
                    <div class="fontclass">.icon-tixian</div>
                </li>

                <li>
                <i class="icon iconfont icon-shouzhimingxi"></i>
                    <div class="name">收支明细</div>
                    <div class="fontclass">.icon-shouzhimingxi</div>
                </li>

                <li>
                <i class="icon iconfont icon-suoding"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-suoding</div>
                </li>

                <li>
                <i class="icon iconfont icon-dayuhao"></i>
                    <div class="name">大于号</div>
                    <div class="fontclass">.icon-dayuhao</div>
                </li>

                <li>
                <i class="icon iconfont icon-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode1</div>
                </li>

                <li>
                <i class="icon iconfont icon-shujia1"></i>
                    <div class="name">书架</div>
                    <div class="fontclass">.icon-shujia1</div>
                </li>

                <li>
                <i class="icon iconfont icon-rili1"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili1</div>
                </li>

                <li>
                <i class="icon iconfont icon-wodehui"></i>
                    <div class="name">我的（灰）</div>
                    <div class="fontclass">.icon-wodehui</div>
                </li>

                <li>
                <i class="icon iconfont icon-rilihui"></i>
                    <div class="name">日历（灰）</div>
                    <div class="fontclass">.icon-rilihui</div>
                </li>

                <li>
                <i class="icon iconfont icon-shujiahui"></i>
                    <div class="name">书架（灰）</div>
                    <div class="fontclass">.icon-shujiahui</div>
                </li>

                <li>
                <i class="icon iconfont icon-dizhi1"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-dizhi1</div>
                </li>

                <li>
                <i class="icon iconfont icon-shezhitixing"></i>
                    <div class="name">设置提醒</div>
                    <div class="fontclass">.icon-shezhitixing</div>
                </li>

                <li>
                <i class="icon iconfont icon-tuijianyoujiang"></i>
                    <div class="name">推荐有奖</div>
                    <div class="fontclass">.icon-tuijianyoujiang</div>
                </li>

                <li>
                <i class="icon iconfont icon-yonghufankui"></i>
                    <div class="name">用户反馈</div>
                    <div class="fontclass">.icon-yonghufankui</div>
                </li>

                <li>
                <i class="icon iconfont icon-cihui"></i>
                    <div class="name">词汇</div>
                    <div class="fontclass">.icon-cihui</div>
                </li>

                <li>
                <i class="icon iconfont icon-xunzhang"></i>
                    <div class="name">勋章</div>
                    <div class="fontclass">.icon-xunzhang</div>
                </li>

                <li>
                <i class="icon iconfont icon-wodeqianbao"></i>
                    <div class="name">我的钱包</div>
                    <div class="fontclass">.icon-wodeqianbao</div>
                </li>

                <li>
                <i class="icon iconfont icon-changjianwenti"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti</div>
                </li>

                <li>
                <i class="icon iconfont icon-yonghufankui1"></i>
                    <div class="name">用户反馈</div>
                    <div class="fontclass">.icon-yonghufankui1</div>
                </li>

                <li>
                <i class="icon iconfont icon-changjianwenti1"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti1</div>
                </li>

                <li>
                <i class="icon iconfont icon-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi</div>
                </li>

                <li>
                <i class="icon iconfont icon-rili-jinru"></i>
                    <div class="name">日历-进入</div>
                    <div class="fontclass">.icon-rili-jinru</div>
                </li>

                <li>
                <i class="icon iconfont icon-lijijinrushiting"></i>
                    <div class="name">立即进入试听</div>
                    <div class="fontclass">.icon-lijijinrushiting</div>
                </li>

                <li>
                <i class="icon iconfont icon-cihui1"></i>
                    <div class="name">词汇</div>
                    <div class="fontclass">.icon-cihui1</div>
                </li>

                <li>
                <i class="icon iconfont icon-jiangyi"></i>
                    <div class="name">讲义</div>
                    <div class="fontclass">.icon-jiangyi</div>
                </li>

                <li>
                <i class="icon iconfont icon-bofangsudu"></i>
                    <div class="name">播放速度</div>
                    <div class="fontclass">.icon-bofangsudu</div>
                </li>

                <li>
                <i class="icon iconfont icon-gengduo1"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo1</div>
                </li>

                <li>
                <i class="icon iconfont icon-yinpin-zhuti"></i>
                    <div class="name">音频-主体</div>
                    <div class="fontclass">.icon-yinpin-zhuti</div>
                </li>

                <li>
                <i class="icon iconfont icon-yinpin-boxing"></i>
                    <div class="name">音频-波形</div>
                    <div class="fontclass">.icon-yinpin-boxing</div>
                </li>

                <li>
                <i class="icon iconfont icon-yinpin"></i>
                    <div class="name">音频</div>
                    <div class="fontclass">.icon-yinpin</div>
                </li>

                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>

                <li>
                <i class="icon iconfont icon-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi</div>
                </li>

                <li>
                <i class="icon iconfont icon-yuedubeijing"></i>
                    <div class="name">阅读背景</div>
                    <div class="fontclass">.icon-yuedubeijing</div>
                </li>

                <li>
                <i class="icon iconfont icon-xiaoxi1"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi1</div>
                </li>

                <li>
                <i class="icon iconfont icon-daojishi"></i>
                    <div class="name">倒计时</div>
                    <div class="fontclass">.icon-daojishi</div>
                </li>

                <li>
                <i class="icon iconfont icon-shouqi1"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-shouqi1</div>
                </li>

                <li>
                <i class="icon iconfont icon-kongbai"></i>
                    <div class="name">空白</div>
                    <div class="fontclass">.icon-kongbai</div>
                </li>

                <li>
                <i class="icon iconfont icon-cihui2"></i>
                    <div class="name">词汇</div>
                    <div class="fontclass">.icon-cihui2</div>
                </li>

                <li>
                <i class="icon iconfont icon-qianbao1"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.icon-qianbao1</div>
                </li>

                <li>
                <i class="icon iconfont icon-fanxianjilu2"></i>
                    <div class="name">返现记录</div>
                    <div class="fontclass">.icon-fanxianjilu2</div>
                </li>

                <li>
                <i class="icon iconfont icon-shouzhimingxi1"></i>
                    <div class="name">收支明细</div>
                    <div class="fontclass">.icon-shouzhimingxi1</div>
                </li>

                <li>
                <i class="icon iconfont icon-buqiajuan"></i>
                    <div class="name">补学券</div>
                    <div class="fontclass">.icon-buqiajuan</div>
                </li>

                <li>
                <i class="icon iconfont icon-zhuyi"></i>
                    <div class="name">注意</div>
                    <div class="fontclass">.icon-zhuyi</div>
                </li>

                <li>
                <i class="icon iconfont icon-fanxian"></i>
                    <div class="name">返现</div>
                    <div class="fontclass">.icon-fanxian</div>
                </li>

                <li>
                <i class="icon iconfont icon-qiajuan"></i>
                    <div class="name">卡劵</div>
                    <div class="fontclass">.icon-qiajuan</div>
                </li>

                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>

                <li>
                <i class="icon iconfont icon-tixing"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-tixing</div>
                </li>

                <li>
                <i class="icon iconfont icon-haoyougongdu"></i>
                    <div class="name">好友共读</div>
                    <div class="fontclass">.icon-haoyougongdu</div>
                </li>

                <li>
                <i class="icon iconfont icon-jiangxuejin"></i>
                    <div class="name">奖学金</div>
                    <div class="fontclass">.icon-jiangxuejin</div>
                </li>

                <li>
                <i class="icon iconfont icon-dengdaikaike"></i>
                    <div class="name">等待开课</div>
                    <div class="fontclass">.icon-dengdaikaike</div>
                </li>

                <li>
                <i class="icon iconfont icon-shangchuanzhong"></i>
                    <div class="name">上传中</div>
                    <div class="fontclass">.icon-shangchuanzhong</div>
                </li>

                <li>
                <i class="icon iconfont icon-jiangxuejin1"></i>
                    <div class="name">奖学金</div>
                    <div class="fontclass">.icon-jiangxuejin1</div>
                </li>

                <li>
                <i class="icon iconfont icon-shouqi"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-shouqi</div>
                </li>

                <li>
                <i class="icon iconfont icon-zhankai"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-zhankai</div>
                </li>

                <li>
                <i class="icon iconfont icon-shiting"></i>
                    <div class="name">试听</div>
                    <div class="fontclass">.icon-shiting</div>
                </li>

                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>

                <li>
                <i class="icon iconfont icon-wodeshujia1"></i>
                    <div class="name">我的书架</div>
                    <div class="fontclass">.icon-wodeshujia1</div>
                </li>

                <li>
                <i class="icon iconfont icon-shujia"></i>
                    <div class="name">书架</div>
                    <div class="fontclass">.icon-shujia</div>
                </li>

                <li>
                <i class="icon iconfont icon-shuku"></i>
                    <div class="name">书库</div>
                    <div class="fontclass">.icon-shuku</div>
                </li>

                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>

                <li>
                <i class="icon iconfont icon-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili</div>
                </li>

                <li>
                <i class="icon iconfont icon-shujia-light"></i>
                    <div class="name">书架-light</div>
                    <div class="fontclass">.icon-shujia-light</div>
                </li>

                <li>
                <i class="icon iconfont icon-rili-light"></i>
                    <div class="name">日历-light</div>
                    <div class="fontclass">.icon-rili-light</div>
                </li>

                <li>
                <i class="icon iconfont icon-wode-light"></i>
                    <div class="name">我的-light</div>
                    <div class="fontclass">.icon-wode-light</div>
                </li>

                <li>
                <i class="icon iconfont icon-shuku-light"></i>
                    <div class="name">书库-light</div>
                    <div class="fontclass">.icon-shuku-light</div>
                </li>

                <li>
                <i class="icon iconfont icon-wodeshuji-kongbaiye"></i>
                    <div class="name">我的书籍-空白页</div>
                    <div class="fontclass">.icon-wodeshuji-kongbaiye</div>
                </li>

                <li>
                <i class="icon iconfont icon-bofangsudu1"></i>
                    <div class="name">播放速度</div>
                    <div class="fontclass">.icon-bofangsudu1</div>
                </li>

                <li>
                <i class="icon iconfont icon-zitidaxiao"></i>
                    <div class="name">字体大小</div>
                    <div class="fontclass">.icon-zitidaxiao</div>
                </li>

                <li>
                <i class="icon iconfont icon-yuedubeijing1"></i>
                    <div class="name">阅读背景</div>
                    <div class="fontclass">.icon-yuedubeijing1</div>
                </li>

                <li>
                <i class="icon iconfont icon-gengduo2"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo2</div>
                </li>

        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
